<template>
    <div class="page-header flex-row flex-item">
<!--        eslint-disable-next-line vue/no-mutating-props-->
        <el-radio-group class="filter-item" v-if="showNet" v-model="filterData.network" size="small">
            <el-radio-button v-for="item in networks" :label="item.value" :key="item.value">{{ item.label }}</el-radio-button>
        </el-radio-group>
        <slot :data="filterData"></slot>
        <el-button v-if="showSearchBtn" class="filter-item" size="mini" :type="isEq ? 'primary' : 'default'" @click="isEq = 1">精确查询</el-button>
        <div class="flex1"></div>
        <slot name="append"></slot>
    </div>
</template>

<script>
import { networks } from '@/assets/dict'
export default {
  name: 'tz-filter',
  props: {
    showNet: {
      type: Boolean,
      default() {
        return true;
      }
    },
    showSearchBtn: {
      type: Boolean,
      default: true
    },
    filterData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isEq: 0,
      networks,
      timer: null
    }
  },
  watch: {
    filterData: {
      deep: true,
      immediate: false,
      handler(N) {
        this.isEq = 0
        this.handleChange({
          ...N,
          isEq: 0
        })
      }
    },
    isEq(N) {
      this.handleChange({
        ...this.filterData,
        isEq: N
      })
    }
  },
  methods: {
    handleChange(data) {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.$emit('change', data)
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
    .page-header {
        margin-bottom: 10px;
        .filter-item {
            min-height: 32px;
            margin-right: 10px;
        }
    }
</style>